<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :with-header="false" class="demand_box" size='720px'>
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">选择商品</span>
                <span class="icon_btn icon_btn_32" @click="dialogVisible=false"><img src="../../assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="shop_search">
                <el-input placeholder="请输入商品名称/ID" size="small" style="width:300px" prefix-icon="el-icon-search" clearable @change="getShopList(1)" v-model="queryInfo.product">
                </el-input>
            </div>
            <div class="demand_center flex" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                <el-table :data="tableData" height="100%" class="com_table" @row-click="selectShop" v-if="total>0">
                    <el-table-column prop="full_name" label="商品信息">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter">
                                <div class="shop_radio">
                                    <el-radio v-model="hasCheck" :label="scope.row.product_id.toString()">&nbsp</el-radio>
                                </div>
                                <div class="shop_center flexbox flexcenter">
                                    <img :src="scope.row.img" alt="" class="shop_img">
                                    <div class="shop_info">
                                        <div class="shop_name">{{scope.row.product_name}}</div>
                                        <div class="shop_id">ID：{{scope.row.product_id}}</div>
                                        <div class="shop_price">￥{{scope.row.discount_price}}</div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="type" label="类目" width="110">
                    </el-table-column> -->
                    <el-table-column prop="product_rate" label="好评率" width="110">
                        <template slot-scope="scope">
                            {{scope.row.product_rate/100}} %
                        </template>
                    </el-table-column>
                    <el-table-column prop="sale_time" label="上架时间" width="110">
                    </el-table-column>
                </el-table>
                <div class="flexbox flexcenter flexcolumn flexjust height_100" v-else>
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03 flexbox flexcenter">当前没有商品可供选择，<el-link type="primary" :underline="false" @click="freshShop()">点击更新</el-link> 重试</div>
                </div>
            </div>
            <div class="page_box flexbox flexcenter" v-if="total>0">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            hasCheck: "",
            index: "",
            queryInfo: {
                page: 1,
                limit: 20,
                advertiser_id: "",
                product: "",
            },
            total: 0,
            tableData: [],
        };
    },
    created() {
        this.$bus.on("choiceShop", (value) => {
            this.dialogVisible = value.dialogVsb;
            this.index = value.index;
            this.hasCheck = value.hasCheck;
            this.queryInfo.advertiser_id = value.advertiser_id;
            this.getShopList();
        });
    },
    beforeDestroy() {
        this.$bus.off("choiceShop");
    },
    methods: {
        selectShop(row) {
            let index = this.index;
            this.hasCheck = row.product_id;
            this.$parent.dataForm.tableData[index].hasShop = row;
            this.dialogVisible = false;
            window.sessionStorage.setItem(
                "dataForm",
                JSON.stringify(this.$parent.dataForm)
            );
        },

        //获取商品
        async getShopList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "launch/Getinfo/get_product",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.total = res.data.count;
                for(let i in res.data.list){
                    res.data.list[i].discount_price = res.data.list[i].discount_price/100
                }
                this.tableData = res.data.list;
            }
        },

        //获取商品
        async freshShop() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "launch/Getinfo/set_product",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.$message({
                    message: "更新成功",
                    type: "success",
                });
                this.loading = false;
                this.getShopList(1)
            }
        },

        // 关闭重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false;
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getShopList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getShopList(val);
        },
    },
    components: {},
};
</script>
<style scoped>
.shop_search {
    padding: 20px 20px 0 20px;
}
.shop_info {
    min-width: 0;
    margin-left: 20px;
}
.shop_img {
    width: 80px;
    height: 80px;
    border-radius: 2px;
}
.shop_center {
    min-width: 0;
}
.shop_name {
    font-size: 14px;
    color: #17233d;
    line-height: 22px;
    height: 22px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.shop_id {
    font-size: 14px;
    color: #616c85;
    line-height: 22px;
    margin-top: 4px;
}
.shop_price {
    font-size: 14px;
    color: #616c85;
    font-weight: bold;
    line-height: 22px;
    margin-top: 4px;
}
</style>


